<template>
  <!--  首页-->
  <div>
    <div style="margin:auto;width: 1200px;">
      <!--      首页第一个内容栏-->
      <div class="d1">
        <!--        课程分类卡片-->
        <el-card class="d1-box-card" style="border-radius: 12px">
          <div slot="header" class="d1-clearfix" style="height: 10px;">
            <span style="margin-top: 0;font-size: 18px">课程分类</span>
          </div>
          <!--          课程大类标签-->
          <div v-for="item in fathertypeList" :key="item.fathertypeId" class="d1-text d1-item"
               style="display:flex;white-space:nowrap;">
            <router-link :to="'/courseTypeView/'+item.fathertypeId"
                         style="margin-right: 5px;font-size: 14px;color: #333333;text-decoration: none;">
              {{ item.fathertypeName }}
            </router-link>
            <!--            课程大类下的详细课程分类-->
            <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
              <router-link v-for="it in coursetypeList"
                           :to="'/courseTypeView/courseListView/'+item.fathertypeId+'/'+it.coursetypeId"
                           v-if="it.fathertypeId===item.fathertypeId"
                           style="font-size: 12px;color: #999999;text-decoration: none;">{{ it.coursetypeName }} /
              </router-link>
            </div>
          </div>
        </el-card>
        <!--        首页推荐内容走马灯-->
        <div class="d1-block">
          <el-carousel class="d1-carousel" :interval="5000" :height="dataHeight" arrow="always"
                       style="border-radius: 12px">
            <el-carousel-item v-for="item in posterList" @click.native="on_poster(item.url)" :key="item">
              <img :src="`http://localhost:8089/upload/${item.imgUrl}`" style="width: 100%;height: 100%"></img>
            </el-carousel-item>
          </el-carousel>
        </div>
        <!--        登录功能的卡片-->
        <el-card class="d1-box-card" style="border-radius: 12px">
          <!--          登陆前卡片-->
          <div id="right-card-1">
            <p style="display: block;font-size:14px;color:#333333;text-align: center;margin-top: 5px">
              免费学习由各校教师与同学上传的课程</p>
            <el-avatar icon="el-icon-user-solid" :size="72"
                       style="font-size: 40px;text-align: center;margin:40px 0 0 45px"></el-avatar>
            <el-button @click="showLoging()"
                       style="margin:20px 0 0 0;width:160px;height: 40px;border-radius: 18px" type="primary">登录/注册
            </el-button>
            <p style="text-align: center;font-size:12px;color:#999999;margin-top:70px;">三明学院 21计二孙乐麟推出</p>
          </div>
          <!--          登陆后卡片-->
          <div id="right-card-2" style="display: none">
            <img :src="`http://localhost:8089/upload/${userData.avatar}`"
                 style="width:72px;height: 72px;border-radius:50%;text-align: center;margin:20px 0 0 45px"></img>
            <p style="font-size:16px;color:#111111;text-align: center;margin:5px auto">{{ userData.userName }}</p>
            <!--            显示用户参与的最近学习的前四个课程-->
            <div style="width: 160px;height: 100px;margin-top:30px;">
              <el-link v-for="(item,index) in attendCourseList.slice(0,4)" @click="on_courseCard(item.courseId)"
                       style="width: 160px" :underline="false">
                {{ item.courseName }}
              </el-link>
            </div>
            <el-button @click="onUserHome"
                       style="margin:20px 0 0 0;width:160px;height: 40px;border-radius: 24px" type="primary">我的课程
            </el-button>
          </div>
        </el-card>
      </div>
      <!--      展示合作组织的栏目，首页第二个内容栏-->
      <div style="display:flex;width: 1200px;height: 60px;margin:10px 0;background-color: white;border-radius: 12px">
        <div style="margin: 20px;"><a>全部 {{ this.schoolList.length }} 所合作组织</a><i
            class="el-icon-arrow-right"></i></div>
        <div style="display: flex;margin: auto 5px;width: 1000px;height: 50px;">
          <div v-for="(item,index) in schoolList" style="height: 100%;width: 20%">
            <img style="width: 150px;text-align: center" :src="`http://localhost:8089/upload/${item.brand}`"/>
          </div>
        </div>
      </div>
      <!--      首页第三个内容栏，指定分类展示课程-->
      <div style="width: 1200px;margin:20px 0;">
        <a style="font-size: 24px">推荐课程</a>
        <a style="color:#999999;margin-left:20px ">为您推荐参与人数较多的课程</a>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 1190px;min-height: 400px">
          <el-empty v-if="courseList.length===0" description="该板块没有课程哦，看看其他板块吧"></el-empty>
          <el-tab-pane label="全部" name="0" @click="getCouseAll()" style="display: flex;flex-direction: column;">
            <el-row>
              <el-col style="width: 238px;height:262px;margin: 10px auto 28px;padding: 10px"
                      v-for="(item,index) in courseList.slice(0,14)" :key="item.courseId"
                      :offset="index > 0 ? 2 : 0">
                <a @click="on_courseCard(item.courseId)" style="text-decoration: none;cursor:pointer;">
                  <el-card :body-style="{ padding: '0px'}" style="border-radius: 12px">
                    <img :src="`http://localhost:8089/upload/${item.cover}`"
                         class="k-image"/>
                    <div style="height: 126px;padding: 10px 12px;position: relative;">
                      <p style="font-weight: bold;color:#333333;margin: 0">{{ item.courseName }}</p>
                      <p style="color:#666666;margin: 0">{{ item.schoolName }}</p>
                      <p style="color: #999999;margin: 0">{{ item.userName }}</p>
                      <p style="margin: 40px 0 0;float: right;color: #999999">{{ item.attendNum }}人参加</p>
                    </div>
                  </el-card>
                </a>
              </el-col>
            </el-row>
            <el-pagination
                @size-change="handleSizechange"
                @current-change="getPageCourse"
                :current-page="currentPage"
                :page-sizes="[10,15,20]"
                :page-size="pageSize"
                layout="total,sizes,prev,pager,next,jumper"
                :total="total"
                style="text-align: center;margin-top: 10px">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="计算机" name="1">
            <el-col style="width: 238px;height:262px;margin: 10px auto 28px;padding: 10px"
                    v-for="(item,index) in courseList.slice(0,14)" :key="item.courseId"
                    :offset="index > 0 ? 2 : 0">
              <a @click="on_courseCard(item.courseId)" style="text-decoration: none;cursor:pointer;">
                <el-card :body-style="{ padding: '0px'}" style="border-radius: 12px">
                  <img :src="`http://localhost:8089/upload/${item.cover}`"
                       class="k-image"/>
                  <div style="height: 126px;padding: 10px 12px;position: relative;">
                    <p style="font-weight: bold;color:#333333;margin: 0">{{ item.courseName }}</p>
                    <p style="color:#666666;margin: 0">{{ item.schoolName }}</p>
                    <p style="color: #999999;margin: 0">{{ item.userName }}</p><!--添加教师团队-->
                    <p style="margin: 40px 0 0;float: right;color: #999999">{{ item.attendNum }}人参加</p>
                  </div>
                </el-card>
              </a>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="专升本" name="2">
            <el-col style="width: 238px;height:262px;margin: 10px auto 28px;padding: 10px"
                    v-for="(item,index) in courseList.slice(0,14)" :key="item.courseId"
                    :offset="index > 0 ? 2 : 0">
              <a @click="on_courseCard(item.courseId)" style="text-decoration: none;cursor:pointer;">
                <el-card :body-style="{ padding: '0px'}" style="border-radius: 12px">
                  <img :src="`http://localhost:8089/upload/${item.cover}`"
                       class="k-image"/>
                  <div style="height: 126px;padding: 10px 12px;position: relative;">
                    <p style="font-weight: bold;color:#333333;margin: 0">{{ item.courseName }}</p>
                    <p style="color:#666666;margin: 0">{{ item.schoolName }}</p>
                    <p style="color: #999999;margin: 0">{{ item.userName }}</p><!--添加教师团队-->
                    <p style="margin: 40px 0 0;float: right;color: #999999">{{ item.attendNum }}人参加</p>
                  </div>
                </el-card>
              </a>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="四六级" name="3">
            <el-col style="width: 238px;height:262px;margin: 10px auto 28px;padding: 10px"
                    v-for="(item,index) in courseList.slice(0,14)" :key="item.courseId"
                    :offset="index > 0 ? 2 : 0">
              <a @click="on_courseCard(item.courseId)" style="text-decoration: none;cursor:pointer;">
                <el-card :body-style="{ padding: '0px'}" style="border-radius: 12px">
                  <img :src="`http://localhost:8089/upload/${item.cover}`"
                       class="k-image"/>
                  <div style="height: 126px;padding: 10px 12px;position: relative;">
                    <p style="font-weight: bold;color:#333333;margin: 0">{{ item.courseName }}</p>
                    <p style="color:#666666;margin: 0">{{ item.schoolName }}</p>
                    <p style="color: #999999;margin: 0">{{ item.userName }}</p><!--添加教师团队-->
                    <p style="margin: 40px 0 0;float: right;color: #999999">{{ item.attendNum }}人参加</p>
                  </div>
                </el-card>
              </a>
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  // 引用父组件app.Vue的登录方法使登录按钮调用app.Vue中的登录功能，实现登录功能的复用
  inject: ['showLoginDialog'],
  props: {
    dataHeight: {
      type: String,
      default: '360px'
    }
  },
  data() {
    return {
      login: {},
      userData: {},
      activeName: '0',
      loginActiveName: 'first',
      fathertypeList: [],
      coursetypeList: [],
      courseList: [],
      schoolList: [],
      attendCourseList: [],
      posterList:[],
      formLabelWidth: "",
      currentPage: 1,
      pageSize: 10,
      total: 10,
      rules: {
        phone: [
          {required: true, message: '请输入正确的手机号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入正确的邮箱', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '请输入价格', trigger: 'blur'},
          {pattern: /^\d+\.?\d*$/, message: '请输入数字', trigger: 'blur'}
        ],
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ]
      },
    }
  },
  methods: {
    // 调用app.Vue的登录功能
    showLoging() {
      this.showLoginDialog();
    },
    handleClick(tab, event) {
      if (tab.name === "0") {
        this.getPageCourse(this.currentPage);
      } else {
        this.courseList = [];
        this.getCourseByFatherType(tab.name);
      }
      //console.log(tab, event);
    },
    onUserHome() {
      this.$router.push({path: '/userHome'})
    },
    // 使用用户名登录
    loginByUserName() {
      this.$axios({
        method: 'post',
        url: 'http://localhost:8089/user/loginByUserName',
        data: this.login
      }).then(res => {
        if (res.data.code === 200) {
          window.localStorage.setItem('token', res.data.token);
          window.localStorage.setItem('userId', res.data.userId);
          window.localStorage.setItem('userName', res.data.userName);
          window.localStorage.setItem('avatar', res.data.avatar);
          this.$message({
            message: '登陆成功',
            type: 'success'
          });
          this.$router.go(0);
          this.dialogVisible = false;
        }

      }).catch(err => console.log(err));
    },
    // getCouseAll() {
    //   this.$axios({
    //     method: 'get',
    //     url: 'http://localhost:8089/course/findAll'
    //   }).then(res => {
    //     this.courseList = res.data.dataobject;
    //   }).catch(err => console.log(err));
    // },
    handleSizechange(size) {
      this.pageSize = size;
      this.getPageCourse(1);
    },
    // 分页查询课程
    getPageCourse(current = 1) {
      this.currentPage = current;
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/course/getPageCourse/${this.currentPage}/${this.pageSize}`,
      }).then(res => {
        this.total = res.data.dataobject.total;
        this.courseList = res.data.dataobject.pageList;
      }).catch(err => console.log(err));
    },
    // 查询所有课程大类
    getFathertypeAll() {
      this.$axios({
        method: 'get',
        url: 'http://localhost:8089/fathertype/findAll'
      }).then(res => {
        this.fathertypeList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    // 查询所有课程分类
    getCoursetypeAll() {
      this.$axios({
        method: 'get',
        url: 'http://localhost:8089/coursetype/findAll'
      }).then(res => {
        this.coursetypeList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    // 查询所有合作组织
    getSchoolAll() {
      this.$axios({
        method: 'get',
        url: 'http://localhost:8089/school/findAll'
      }).then(res => {
        this.schoolList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    // 根据课程分类查询课程
    getCourseByCourseType(coursetypeId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/course/selectCourseByCoursetypeId/${parseInt(coursetypeId)}`
      }).then(res => {
        this.courseList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    // 根据课程大类查询课程
    getCourseByFatherType(fatherId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/course/selectCourseByFathertypeId/${parseInt(fatherId)}`
      }).then(res => {
        this.courseList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    // 查询用户参与的课程
    getAttendByUserId(userId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/user/attendCourse/selectAttendByUserId/${userId}`
      }).then(res => {
        if (res.data.code === 200)
          this.attendCourseList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    // 点击课程的跳转方法
    on_courseCard(courseId) {
      console.log(courseId);
      window.open(this.$router.resolve({path: `/courseView/${courseId}`}).href, '_blank');
    },
    getPosterAll(){
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/poster/selectPosterAll`
      }).then(res => {
        if (res.data.code === 200)
          this.posterList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    on_poster(url){
      window.open(this.$router.resolve({path:url}).href, '_blank');
    }
  },
  created() {
    this.getFathertypeAll();
    this.getCoursetypeAll();
    // this.getCouseAll();
    this.getPageCourse();
    this.getSchoolAll();
    this.getPosterAll();
  },
  mounted() {
    // 判断用户登录状态控制需要的方法进行调用
    if (localStorage.getItem('token') != null) {
      this.userData['userId'] = localStorage.getItem('userId');
      this.userData['userName'] = localStorage.getItem('userName');
      this.userData['avatar'] = localStorage.getItem('avatar');
      document.getElementById("right-card-1").style.display = "none";
      document.getElementById("right-card-2").style.display = "";
      this.getAttendByUserId(this.userData.userId);
    }
  }
}
</script>

<style scoped>
@import '../css/home.css';
</style>